<template>
  <div class="page">
    <!-- <tw-header :label="indexSchoolName"></tw-header> -->
    <el-row
      type="flex"
      justify="space-between"
      :gutter="20"
      style="align-items: stretch"
    >
      <!-- 左侧 -->
      <el-col :span="8" v-show="showall">
        <tw-card
          label="学校"
          style="min-height: 462px"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': schooldegree==='1'}" @click="changeDegree('1', 'school')">
                <div>小学学校数量</div>
                <div><span class="digi xnum">{{schoolData.xs.num}}</span><span>所</span></div>
                <div>预测未来3年班级缺口</div>
                <div><span class="digi xnum">{{schoolData.xs.need}}</span><span>所</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': schooldegree==='2'}" @click="changeDegree('2', 'school')">
                <div>初中学校数量</div>
                <div><span class="digi xnum">{{schoolData.cz.num}}</span><span>所</span></div>
                <div>预测未来3年班级缺口</div>
                <div><span class="digi xnum">{{schoolData.cz.need}}</span><span>所</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': schooldegree==='3'}" @click="changeDegree('3', 'school')">
                <div>高中学校数量</div>
                <div><span class="digi xnum">{{schoolData.gz.num}}</span><span>所</span></div>
                <div>预测未来3年班级缺口</div>
                <div><span class="digi xnum">{{schoolData.gz.need}}</span><span>所</span></div>
              </div>
            </div>
            <tw-linebar source="school" :degree="schooldegree"></tw-linebar>
          </div>
          <div class="tw-grade-left text-highlight" v-else>
            <div class="tw-grade-left-text">
              <div class="xtitle">学校名称</div>
              <div class="xbody">{{currentSchool.name}}</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</div>
              <div class="xbody">{{currentSchool.xq}}</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">常住人口</div>
              <div class="xbody">{{currentSchool.rk}}人</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">学校类型</div>
              <div class="xbody">{{currentSchool.lx}}</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">学校地址</div>
              <div class="xbody">{{currentSchool.dz}}</div>
            </div>
          </div>
        </tw-card>

        <tw-card
          label="教学及辅助用房面积"
          class="mt-medium"
          style="min-height: 462px"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': housedegree==='1'}" @click="changeDegree('1', 'house')">
                <div>小学现有面积</div>
                <div>
                  <span class="digi xnum">{{houseData.xs.num}}</span>
                  <span class="text-supmini digi">M</span>
                  <span class="text-superior digi">2</span>
                </div>
                <div>预测未来3年面积缺口</div>
                <div>
                  <span class="digi xnum">{{houseData.xs.need}}</span>
                  <span class="text-supmini digi">M</span>
                  <span class="text-superior digi">2</span>
                </div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': housedegree==='2'}" @click="changeDegree('2', 'house')">
                <div>初中现有面积</div>
                <div>
                  <span class="digi xnum">{{houseData.cz.num}}</span>
                  <span class="text-supmini digi">M</span>
                  <span class="text-superior digi">2</span>
                </div>
                <div>预测未来3年面积缺口</div>
                <div>
                  <span class="digi xnum">{{houseData.cz.need}}</span>
                  <span class="text-supmini digi">M</span>
                  <span class="text-superior digi">2</span>
                </div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': housedegree==='3'}" @click="changeDegree('3', 'house')">
                <div>高中现有面积</div>
                <div>
                  <span class="digi xnum">{{houseData.gz.num}}</span>
                  <span class="text-supmini digi">M</span>
                  <span class="text-superior digi">2</span>
                </div>
                <div>预测未来3年面积缺口</div>
                <div>
                  <span class="digi xnum">{{houseData.gz.need}}</span>
                  <span class="text-supmini digi">M</span>
                  <span class="text-superior digi">2</span>
                </div>
              </div>
            </div>
            <tw-linebar source="house" :degree="housedegree"></tw-linebar>
          </div>
          <div v-else>
            <div class="tw-grade-school">
              <div>当前面积：
                <span class="digi xnum">{{currentHouse.dqmj}}</span>
                <span class="text-supmini digi">M</span>
                <span class="text-superiordigi">2</span>
                <span class="pl-30">生均面积：</span>
                <span class="digi xnum">{{currentHouse.sjmj}}</span>
                <span class="text-supmini digi">M</span>
                <span class="text-superior digi">2</span>
              </div>
              <div>预测下一年度需要面积：
                <span class="digi xnum">{{currentHouse.ycmj}}</span>
                <span class="text-supmini digi">M</span>
                <span class="text-superior digi">2</span>
                <span class="pl-30">缺少面积：</span>
                <span class="digi xnum text-error">{{currentHouse.qsmj}}</span>
                <span class="text-supmini digi">M</span>
                <span class="text-superior digi">2</span>
              </div>
            </div>
            <tw-linebarsc
              source="house"
              :dataset="currentHouse.dataset"
              :chartDataMaps="currentHouse.chartDataMaps">
            </tw-linebarsc>
          </div>
        </tw-card>
      </el-col>
      <!-- /左侧 -->
      <!-- 中部 -->
      <el-col :span="8">
        <tw-midhead></tw-midhead>
        <div
          label=""
          class="mt-medium tw-middle-card"
        >
          <div :style="{height:'836px',width:'100%'}" id="myEchart">
            <tw-map @selectSchool="getSchool" @showall="getShowAll" :source="currentActive"></tw-map>
          </div>
        </div>
      </el-col>
      <!-- /中部 -->
      <!-- 右侧 -->
      <el-col :span="8" v-show="showall">
        <tw-card
          label="学生"
          style="min-height: 462px"
          :grayRightLabel="true"
          link="forecase"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': studentdegree==='1'}" @click="changeDegree('1', 'student')">
                <div>小学学生数量</div>
                <div><span class="digi xnum">{{studentData.xs.num}}</span><span>人</span></div>
                <div>预测未来3年学生</div>
                <div><span class="digi xnum">{{studentData.xs.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': studentdegree==='2'}" @click="changeDegree('2', 'student')">
                <div>初中学生数量</div>
                <div><span class="digi xnum">{{studentData.cz.num}}</span><span>人</span></div>
                <div>预测未来3年学生</div>
                <div><span class="digi xnum">{{studentData.cz.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': studentdegree==='3'}" @click="changeDegree('3', 'student')">
                <div>高中学生数量</div>
                <div><span class="digi xnum">{{studentData.gz.num}}</span><span>人</span></div>
                <div>预测未来3年学生</div>
                <div><span class="digi xnum">{{studentData.gz.need}}</span><span>人</span></div>
              </div>
            </div>
            <tw-linebar source="student" :degree="studentdegree"></tw-linebar>

          </div>
          <div v-else>
            <div class="tw-grade-school">
              <div>
                当前学生人数：<span class="digi xnum">{{currentStudent.xsrs}}</span>人
                <span class="pl-30">预测下一年度小学学生：</span>
                <span class="digi xnum">{{currentStudent.ycxsrs}}</span>人</div>
              <div>
                当前学位数量：<span class="digi xnum">{{currentStudent.xsxws}}</span>人
                <span class="pl-30">预测下一年度缺失学位：</span>
                <span class="digi xnum text-error">{{currentStudent.ycxwrs}}</span>人
              </div>
            </div>
            <tw-linebarsc
              source="student"
              :dataset="currentStudent.dataset"
              :chartDataMaps="currentStudent.chartDataMaps">
            </tw-linebarsc>
          </div>
        </tw-card>
        <tw-card
          label="教师"
          :grayRightLabel="true"
          class="mt-medium"
          style="min-height: 462px"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': teacherdegree==='1'}" @click="changeDegree('1', 'teacher')">
                <div>小学教师数量</div>
                <div><span class="digi xnum">{{teacherData.xs.num}}</span><span>人</span></div>
                <div>预测未来3年教师缺口</div>
                <div><span class="digi xnum">{{teacherData.xs.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': teacherdegree==='2'}" @click="changeDegree('2', 'teacher')">
                <div>初中教师数量</div>
                <div><span class="digi xnum">{{teacherData.cz.num}}</span><span>人</span></div>
                <div>预测未来3年教师缺口</div>
                <div><span class="digi xnum">{{teacherData.cz.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': teacherdegree==='3'}" @click="changeDegree('3', 'teacher')">
                <div>高中教师数量</div>
                <div><span class="digi xnum">{{teacherData.gz.num}}</span><span>人</span></div>
                <div>预测未来3年教师缺口</div>
                <div><span class="digi xnum">{{teacherData.gz.need}}</span><span>人</span></div>
              </div>
            </div>
            <tw-linebar source="teacher" :degree="teacherdegree"></tw-linebar>
          </div>
          <div v-else>
            <div class="tw-grade-school">
              <div>
                当前教师人数：<span class="digi xnum">{{currentTeacher.dqjsrs}}</span>人
                <span class="pl-30">当前每百名学生教师数：</span>
                <span class="digi xnum">{{currentTeacher.dqbmxsjss}}</span>人</div>
              <div>
                预测下一年度需要教师数据<span class="digi xnum">{{currentTeacher.ycjsrs}}</span>人
                <span class="pl-30">缺少教师：</span>
                <span class="digi xnum text-error">{{currentTeacher.qsjs}}</span>人
              </div>
            </div>
            <tw-linebarsc
              source="teacher"
              :dataset="currentTeacher.dataset"
              :chartDataMaps="currentTeacher.chartDataMaps">
            </tw-linebarsc>
          </div>
        </tw-card>
      </el-col>
      <!-- /右侧 -->
      <tw-footer :areaid="curAreaId" :active="currentActive"></tw-footer>
    </el-row>
    <!-- <div class=" text-highlight" style="z-index: 20; position: absolute; right: 20px; top: 20px; font-size: 16px;cursor: pointer;" @click="$router.push('/forecase')"> 学生预测</div> -->
    <!-- <div style="z-index: 20; position: absolute; right: 20px; top: 20px; font-size: 16px;"> 数据采集截止至{{endtime}}</div> -->
  </div>
</template>

<script>
import TwLinebar from './linebar.vue'
import TwLinebarsc from './linebarschool.vue'
export default {
  name: 'graduate',
  components: { TwLinebar, TwLinebarsc },
  created () {
    let vm = this
    if (vm.$route.query.areaid) {
      vm.curAreaId = vm.$route.query.areaid
    } else {
      vm.curAreaId = '131000'
    }
    vm.$axios.get(`${process.env.BASE_URL}json/config.json`, {
      baseURL: ''
    }).then((resp) => {
      vm.curYear = resp.data.fixedYear
      vm.endtime = resp.data.endtime
      // vm.initData()

      vm.app_jxszhjy_fwnlfx_ycwlsnxxqk()
      vm.app_jxszhjy_fwnlfx_xx_jxyfmjqk()
      vm.app_jxszhjy_fwnlfx_xsjsxxzs()
      vm.app_jxszhjy_fwnlfx_jsqksl()
      vm.app_jxszhjy_fwnlfx_wlsnxszs()
      vm.app_jxszhjy_fwnlfx_yyxxsl()
      vm.app_jxszhjy_fwnlfx_xyjxjfzyfmj()
      vm.app_jxszhjy_fwnlfx_xyjssl()
      vm.app_jxszhjy_fwnlfx_xyxsrs()
      vm.app_jxszhjy_fwnlfx_xx()
      vm.app_jxszhjy_fwnlfx_jxjfzyfmj()
      vm.app_jxszhjy_fwnlfx_js()
      vm.app_jxszhjy_fwnlfx_xs()
    }).catch((err) => {
      console.log(err)
    })
  },
  data () {
    return {
      showall: true,
      indexSchoolName: '学位预警',
      curAreaId: '131000',
      curYear: '2019',
      endtime: '2019-03',
      currentActive: 6,
      bigArea: true,
      schooldegree: '1',
      housedegree: '1',
      studentdegree: '1',
      teacherdegree: '1',
      schoolData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      houseData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      studentData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      teacherData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      currentSchool: {
        name: '',
        xq: '',
        rk: '',
        lx: '',
        dz: ''
      },
      currentHouse: {
        dqmj: '',
        ycmj: '',
        sjmj: '',
        qsmj: '',
        dataset: [],
        chartDataMaps: []
      },
      currentStudent: {
        xsrs: '',
        ycxsrs: '',
        xsxws: '',
        ycxwrs: '',
        dataset: [],
        chartDataMaps: []
      },
      currentTeacher: {
        dqjsrs: '',
        dqbmxsjss: '',
        ycjsrs: '',
        qsjs: '',
        dataset: [],
        chartDataMaps: []
      }
    }
  },
  methods: {
    initData () {
      let vm = this
      vm.$axios.get(`${process.env.BASE_URL}json/graduategongshu.json`, {
        baseURL: ''
      }).then((resp) => {
        vm.schoolData = resp.data.schoolData
        vm.houseData = resp.data.houseData
        vm.studentData = resp.data.studentData
        vm.teacherData = resp.data.teacherData
      }).catch((err) => {
        console.log(err)
      })
    },
    getShowAll (params) {
      this.showall = params
    },
    getSchool (params) {
      let vm = this
      // console.log(params)
      if (params) {
        vm.bigArea = false
        vm.currentSchool = params
        if (params.house) {
          vm.currentHouse = params.house
          vm.currentStudent = params.school
          vm.currentTeacher = params.teacher
        } else {
          vm.currentHouse = {
            dqmj: '',
            ycmj: '',
            sjmj: '',
            qsmj: '',
            dataset: [],
            chartDataMaps: []
          }
          vm.currentStudent = {
            xsrs: '',
            ycxsrs: '',
            xsxws: '',
            ycxwrs: '',
            dataset: [],
            chartDataMaps: []
          }
          vm.currentTeacher = {
            dqjsrs: '',
            dqbmxsjss: '',
            ycjsrs: '',
            qsjs: '',
            dataset: [],
            chartDataMaps: []
          }
        }
      } else {
        this.bigArea = true
      }
    },
    changeDegree (degree, area) {
      let vm = this
      if (area === 'school') {
        vm.schooldegree = degree
      } else if (area === 'house') {
        vm.housedegree = degree
      } else if (area === 'student') {
        vm.studentdegree = degree
      } else if (area === 'teacher') {
        vm.teacherdegree = degree
      }
    },
    // 服务能力分析-预测未来三年学校缺口
    app_jxszhjy_fwnlfx_ycwlsnxxqk () {
      let vm = this
      vm.$axios
      .post('/tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_ycwlsnxxqk', null)
      .then(
        (response) => {
          console.log('服务能力分析-预测未来三年学校缺口=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析-预测未来三年教学用房面积缺口
    app_jxszhjy_fwnlfx_xx_jxyfmjqk () {
      let vm = this
      vm.$axios
      .post('/tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xx_jxyfmjqk', null)
      .then(
        (response) => {
          console.log('服务能力分析-预测未来三年教学用房面积缺口=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析-学生,教师,学校汇总
    app_jxszhjy_fwnlfx_xsjsxxzs () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xsjsxxzs', null)
      .then(
        (response) => {
          console.log('服务能力分析-学生,教师,学校汇总=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析-预测未来三年教师缺口数量
    app_jxszhjy_fwnlfx_jsqksl () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_jsqksl', null)
      .then(
        (response) => {
          console.log('服务能力分析-预测未来三年教师缺口数量=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析-预测未来三年学生总数
    app_jxszhjy_fwnlfx_wlsnxszs () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_wlsnxszs', null)
      .then(
        (response) => {
          console.log('服务能力分析-预测未来三年学生总数=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析-现有学校数量-不同教育阶段
    app_jxszhjy_fwnlfx_yyxxsl () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_yyxxsl', null)
      .then(
        (response) => {
          console.log('服务能力分析-现有学校数量-不同教育阶段=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析_现有教学及辅助用房面积-不同教育阶段
    app_jxszhjy_fwnlfx_xyjxjfzyfmj () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xyjxjfzyfmj', null)
      .then(
        (response) => {
          console.log('服务能力分析_现有教学及辅助用房面积-不同教育阶段=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析-现有教师数量-不同教育阶段
    app_jxszhjy_fwnlfx_xyjssl () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xyjssl', null)
      .then(
        (response) => {
          console.log('服务能力分析-现有教师数量-不同教育阶段=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析-现有学生人数-不同教育阶段
    app_jxszhjy_fwnlfx_xyxsrs () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xyxsrs', null)
      .then(
        (response) => {
          console.log('服务能力分析-现有学生人数-不同教育阶段=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析_学校统计
    app_jxszhjy_fwnlfx_xx () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/themedata/app_jxszhjy_fwnlfx_xx', null)
      .then(
        (response) => {
          console.log('服务能力分析_学校统计=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析_教学及辅助用房面积统计
    app_jxszhjy_fwnlfx_jxjfzyfmj () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/themedata/app_jxszhjy_fwnlfx_jxjfzyfmj', null)
      .then(
        (response) => {
          console.log('服务能力分析_教学及辅助用房面积统计=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析_教师统计
    app_jxszhjy_fwnlfx_jxjfzyfmj () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/themedata/app_jxszhjy_fwnlfx_js', null)
      .then(
        (response) => {
          console.log('服务能力分析_教师统计=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    },
    // 服务能力分析_学生统计
    app_jxszhjy_fwnlfx_xs () {
      let vm = this
      vm.$axios
      .post('tw-cloud-datatheme-server/themedata/app_jxszhjy_fwnlfx_xs', null)
      .then(
        (response) => {
          console.log('服务能力分析_学生统计=======', response.data)
        },
        (response) => {
          console.log('error')
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.tw-grade-left {
  padding: 40px;
}
.tw-grade-left-text {
  display: flex;
  align-items: center;
  font-size: 16px;
  .xtitle {
    height: 54px;
    background: url(~@/assets/images/pic-bkg-mc.png) center no-repeat;
    background-size: 100%;
    width: 30%;
    line-height: 54px;
    padding-left: 27px;
    text-align: center;
  }
  .xbody {
    padding-left: 10px;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.tw-grade-textcard {
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  margin-bottom: 11px;
}
.tw-grade-textcard-item {
  border: 1px solid #05388f;
  color: #bad3ff;
  padding: 5px 10px;
  width: 32%;
  &.xactive {
    border: 1px solid #07ffff;
    color:#07ffff
  }
  .xnum {
    font-size: 22px;
    padding-right: 5px;
  }
}
.tw-grade-school {
  text-align: center;
  font-size: 16px;
  margin: 20px 0;
  line-height: 1.5;
  .xnum {
    font-size: 21px;
    padding-right: 5px;
  }
  .pl-30 {
    padding-left: 30px;
  }
}
.pad-20 {
  padding: 0 20px
}
</style>
